<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../../jquery-1.12.4.min.js"></script>
</head>
<body>
    <canvas id="mycanvas"></canvas>
    <canvas id="canvasLinear"></canvas>
    <script>
        document.addEventListener("DOMContentLoaded", function(){
            var canvas = document.getElementById('canvasLinear');
            var ctx = canvas.getContext('2d');

            // ctx.moveTo(110,75);
            // ctx.arc(10, 10, 5, 0, Math.PI*2, true); // 画圆形
            ctx.shadowOffsetX = 2;
            ctx.shadowOffsetY = 2;
            ctx.shadowBlur = 2;
            ctx.shadowColor = '#666666';
            ctx.font = '24px Arial';
            ctx.fillStyle = '#333333';
            ctx.fillText('带阴影的文字', 0, 0);
            
            // ctx.fillStyle = 'green';
            // ctx.fillRect(10,10, 150, 100);
            // ctx.beginPath() // 开始路径绘制
            // ctx.moveTo(20, 30) // 设置路径起点，坐标为（20，30）
            // ctx.lineTo(200, 10) // 设置路径终点坐标为（200，20）
            // ctx.moveTo(50, 60) // 设置路径起点，坐标为（20，30）
            // ctx.lineTo(200, 10) // 设置路径终点坐标为（200，20）
            // ctx.lineWidth = 10.0 // 设置线宽
            ctx.strokeStyle = '#CC0000'; // 设置线的颜色
            ctx.stroke() // 对线进行着色，这时整条线就变得可见





            // var canvas = document.getElementById('mycanvas');
            // var ctx = canvas.getContext('2d');
            // console.log('ctx', ctx);
            // var image = new Image();
            // image.src = './long.jpeg';
            // // image.crossOrigin = "*";
            // // image.setAttribute('crossOrigin', '');

            // image.onload = function () {
            //     canvas.width = image.width;
            //     canvas.height = image.height;
            //     ctx.drawImage(image, 0, 0);

            //     var imageData = ctx.getImageData(0, 0, image.width, image.height).data;
            //     ctx.fillStyle = "yellow";
            //     ctx.fillRect(0,0,image.width,image.height);

            //     var gap = 6;

            //     for (var h = 0; h < image.height; h+=gap) {
            //         for(var w = 0; w < image.width; w+=gap) {
            //                 var position = (image.width * h + w) * 4;
            //                 var r = imageData[position], g = imageData[position + 1], b = imageData[position + 2];

            //                 if(r+g+b==0) {
            //                     ctx.fillStyle = "#000";
            //                     ctx.fillRect(w,h,4,4);
            //                 }
            //         }
            //     }


            //     console.log('imageData--->', imageData);
            // };


        });
    </script>
</body>
</html>